<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析仪表板 - 新疆博物馆文本分析平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-museum"></i> 新疆博物馆文本分析平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/dashboard">分析仪表板</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container-fluid mt-4">
        <!-- 筛选条件 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-filter"></i> 数据筛选</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">开始日期</label>
                                <input type="date" class="form-control" id="startDate">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">结束日期</label>
                                <input type="date" class="form-control" id="endDate">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">数据来源</label>
                                <select class="form-select" id="sourceFilter">
                                    <option value="all">全部来源</option>
                                    <option value="微博">微博</option>
                                    <option value="新闻">新闻</option>
                                    <option value="博客">博客</option>
                                    <option value="论坛">论坛</option>
                                    <option value="微信公众号">微信公众号</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">关键词</label>
                                <input type="text" class="form-control" id="keywordFilter" placeholder="输入关键词">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button class="btn btn-primary" onclick="applyFilters()">
                                    <i class="fas fa-search"></i> 应用筛选
                                </button>
                                <button class="btn btn-secondary" onclick="resetFilters()">
                                    <i class="fas fa-undo"></i> 重置
                                </button>
                                <button class="btn btn-success" onclick="exportReport()">
                                    <i class="fas fa-download"></i> 导出报告
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-file-alt fa-2x text-primary mb-2"></i>
                        <h4 id="totalTexts">-</h4>
                        <p class="text-muted">总文本数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-smile fa-2x text-success mb-2"></i>
                        <h4 id="avgSentiment">-</h4>
                        <p class="text-muted">平均情感分数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-thumbs-up fa-2x text-info mb-2"></i>
                        <h4 id="positiveRate">-</h4>
                        <p class="text-muted">正面评价比例</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <i class="fas fa-database fa-2x text-warning mb-2"></i>
                        <h4 id="dataSources">-</h4>
                        <p class="text-muted">数据来源数</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <!-- 情感趋势图 -->
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-line"></i> 情感趋势分析</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="sentimentChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 数据来源分布 -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-pie-chart"></i> 数据来源分布</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="sourceChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 关键词云 -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-cloud"></i> 关键词云</h5>
                    </div>
                    <div class="card-body text-center">
                        <img id="wordcloudImage" src="/api/wordcloud" alt="关键词云" class="img-fluid">
                    </div>
                </div>
            </div>
            
            <!-- 情感分布 -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-bar"></i> 情感分布</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="emotionChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 原始数据表格 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-table"></i> 原始数据</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped" id="dataTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>文本内容</th>
                                        <th>日期</th>
                                        <th>来源</th>
                                        <th>情感分数</th>
                                    </tr>
                                </thead>
                                <tbody id="dataTableBody">
                                    <!-- 动态加载数据 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</body>
</html>
